import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  state = {
    name: "珠峰",
    age: 10
  }
  qq = null // 这个是一个DOD元素
  aa = React.createRef()
  changeName = (e) => {
    this.setState({
      name: e.target.value
    })
  }
  componentDidMount() {
    // console.log(this.refs.qwer)
    // this.qq.value = this.state.age;
    // this.qq.oninput = (e) => {
    //   // console.log(e.target.value)
    //   this.setState({
    //     age: e.target.value
    //   })
    // }
    console.log(this.aa.current)
  }
  render() {
    let { name, age } = this.state;
    console.log('render')
    return <div className=''>
      <h1>{name}{age}</h1>
      {/* 表单元素的内容 受当前组建的状态控制 */}
      <input type="text" value={name} onChange={this.changeName} />
      <input type="text" ref={(el) => { this.qq = el }} />
      <input type="text" ref='qwer' />
      <input type="text" ref={this.aa} />
    </div>;
  }
}

ReactDOM.render(<App />, document.getElementById('root'))